import React, { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { ArrowLeft, Ellipsis, Edit } from '@react-vant/icons';
import { Button } from 'react-vant';
import TopTitleBar from "../../components/TopTitleBar";
import "./index.css"
import axios from "../../utils/axios";
const AddressManagement = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const type = location?.state?.type || ''
    const cartItemIds = location?.state?.cartItemIds
    const [addressList, setAddressList] = useState([])
    const addAddress = () => {
        // 跳转到 新增地址页面去！
        navigate('/addressEdit', {
            state: {
                addressId: '',
                type: 'add'
            }
        })
    }
    const getAddressList = () => {
        axios.get('/api/v1/address').then(res => {
            if (res.data.message === 'SUCCESS') {
                setAddressList(res.data.data)
            }
        })
    }
    useEffect(() => {
        getAddressList();
    }, [])

    return (
        <div className="addressManagement">
            <TopTitleBar
                leftIcon={
                    <ArrowLeft onClick={() => navigate(-1)} />
                }
                intermediateContentText="地址管理"
                rightIcon={
                    <Ellipsis />
                }
            />
            <div className="mainContent">
                {/* 写一个组件，或者 用 vant 组件： */}

                {
                    addressList.map(address => {
                        return (
                            <div
                                key={address.addressId}
                                className="addressCards"
                                onClick={() => type === 'create' && navigate('/createOrders', {
                                    state: {
                                        addressId: address.addressId,
                                        cartItemIds
                                    }
                                })}
                            >
                                <div className="addressCardsLeft">
                                    <div className="addressCardsLeftTop">
                                        <div className="userName">
                                            {
                                                address.userName
                                            }
                                        </div>
                                        <div className="userPhone">
                                            {
                                                address.userPhone
                                            }
                                        </div>
                                        {/* 是否有那个 default 的标志 */}
                                        {
                                            address.defaultFlag === 1 &&
                                            <div className="isDefaultFlag">
                                                默认
                                            </div>
                                        }

                                    </div>
                                    <div className="addressCardsLeftBottom">
                                        {/* 左边的底部 */}
                                        <div className="addressInfo">
                                            {
                                                address.provinceName + ' ' + address.cityName + ' ' + address.regionName
                                            }

                                        </div>
                                        <div className="detailAddress">
                                            {
                                                address.detailAddress
                                            }
                                        </div>
                                    </div>
                                </div>

                                <div className="addressCardsRight" onClick={() => navigate('/addressEdit', {
                                    state: {
                                        addressId: address.addressId,
                                        type: 'edit'
                                    }
                                })}>
                                    {/* 点击事件，进入详情，并且，把 addressId 传过去： */}

                                    <Edit color="#b1a59c"></Edit>
                                </div>
                            </div>
                        )
                    })
                }







            </div>

            <div className="btnDiv">
                <Button className="addAddress" color="#1baeae" text='新增地址' onClick={addAddress} />
            </div>
        </div>
    )
}

export default AddressManagement;